import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { DisMenulistWrapper } from "./style";
import AreaItemv1 from "@/components/area-itemv1";
import SkeletonListv1 from "@/components/skeleton-listv1";

interface IProps {
  children?: ReactNode;
  menuList: any[];
  isButtom?: boolean;
  onUploadFn?: () => void;
}

const DisMenuList: FC<IProps> = (props: IProps) => {
  const { menuList, isButtom = true } = props

  const handleuploadMore = () => {
    if (props.onUploadFn) {
      props.onUploadFn()
    }
  }

  return <DisMenulistWrapper>
    <div className="menu-list">
      {menuList.length <= 0 && <SkeletonListv1 />}
      {menuList.length > 0 &&
        menuList.map(item => (
          <AreaItemv1 key={item.id} itemDate={item} urlwidth={420} navigatePath="/playlist" />
        ))
      }
    </div>
    {
      isButtom && menuList.length > 0 && <div className="load-more">
        <button className="grey" onClick={handleuploadMore}>加载更多</button>
      </div>
    }
  </DisMenulistWrapper>;
};

export default memo(DisMenuList);